<template>
  <div class="addUserAndEditUser">
    <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    @close="close"
    :visible.sync="dialogFormVisible"
    :title="title"
    width="600px">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="70px">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username"  show-word-limit clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="formData.phone" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="formData.nickName" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="dept.id">
              <treeselect
              :options="deptOptions"
              :load-options="loadOptions"
              placeholder="请选择部门"
              v-model="formData.dept.id"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位" prop="jobs">
              <el-select v-model="formData.jobs" placeholder="请选择岗位" value-key="id" multiple :style="{width: '100%'}">
                <el-option v-for="(item, index) in jobsOptions" :key="index" :label="item.name"
                  :value="{id: item.id}" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender" size="small">
                <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="enabled">
              <el-radio-group v-model="formData.enabled" size="small">
                <el-radio v-for="(item, index) in enabledOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色" prop="roles">
              <el-select v-model="formData.roles" placeholder="请选择" value-key="id"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in rolesOptions" :key="index" :label="item.name"
                  :value="[{ id: item.id }]" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { Treeselect, LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { getJob } from '@/api/jobs'
import { getRolesAll } from '@/api/roles'
import { getDept, postDeptSuperior } from '@/api/dept'
import { postUsers, putUsers } from '@/api/users'
export default {
  inheritAttrs: false,
  name: 'addUserAndEditUser',
  components: {
    Treeselect
  },
  props: [],
  data () {
    return {
      dialogFormVisible: false,
      formData: {
        username: '', // 用户名
        phone: '', // 电话
        nickName: '', // 昵称
        email: '', // 邮箱
        dept: {
          id: null
        }, // 部门
        jobs: '', // 岗位
        gender: '男', // 性别
        enabled: false, // 激活
        roles: [] // 角色
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }],
        nickName: [{
          required: true,
          message: '请输入昵称',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }]
      },
      genderOptions: [{
        label: '男',
        value: '男'
      }, {
        label: '女',
        value: '女'
      }],
      enabledOptions: [{
        label: '激活',
        value: true
      }, {
        label: '禁用',
        value: false
      }],
      deptOptions: [],
      jobsOptions: [],
      rolesOptions: [],
      title: '新增用户',
      id: null,
      isEdit: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getRolesAndgetJob()
  },
  methods: {
    /**
     *
     * @param {*} isEdit 是否编辑
     * @param {*} data  编辑时需要的数据
     */

    // 点击弹窗
    async isShow (isEdit = false, data) {
      this.dialogFormVisible = true
      this.title = isEdit ? '编辑用户' : '新增用户'
      this.isEdit = isEdit
      await this.$nextTick()
      if (isEdit) {
        const _data = this.formData
        for (const key in _data) {
          _data[key] = data[key]
        }
        this.id = data.id
        const { data: { content } } = await postDeptSuperior([data.dept.id])
        this.deptOptions = content.map(item => (item.hasChildren && !item.children && (item.children = null)) || item)
      }
    },
    // 获取岗位和角色
    getRolesAndgetJob () {
      getJob().then(res => {
        const { content } = res.data
        this.jobsOptions = content
      })
      getRolesAll().then(res => {
        this.rolesOptions = res.data
      })
      getDept().then(res => {
        const { content } = res.data
        this.deptOptions = content.map(item => (item.hasChildren && (item.children = null)) || item)
      })
    },
    // 部门
    loadOptions ({ action, parentNode, callback } = { action: 'LOAD_CHILDREN_OPTIONS' }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        getDept(parentNode && { pid: parentNode.id }).then(res => {
          const { content } = res.data
          const child = content.map(item => (item.hasChildren && (item.children = null)) || item)
          parentNode ? (parentNode.children = child) : (this.deptOptions = child)
          parentNode && callback()
        })
      }
    },
    // 取消
    close () {
      // 重置表单
      this.$refs.elForm.resetFields()
      this.dialogFormVisible = false
    },
    // 确定
    handelConfirm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        this.isEdit ? await putUsers({ id: this.id, ...this.formData }) : await postUsers(this.formData)
        this.$parent.getUsersList()
        this.$emit('update:visible', false)
        this.close()
      })
    }
  }
}

</script>
<style>
</style>
